<template>
    <el-form :model="loginForm" ref="loginFormRef" label-position="right" label-width="auto" class="login-form">
        <h2>骑手登录</h2>
        <el-form-item label="姓名" prop="name">
            <el-input v-model="loginForm.name" placeholder="请输入姓名" clearable/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password/>
        </el-form-item>
        <el-form-item>
            <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleLogin" style="width: 100%;">登录</el-button>
        </el-form-item>
        <el-form-item>
            <el-link type="primary" @click="goToRegister">没有账号？去注册</el-link>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import axios from "axios";

const router = useRouter();
const loginFormRef = ref();
const loginForm = reactive({
    name: '',
    password: '',
    rememberMe: false
});

const handleLogin = async () => {
    try {
        // 表单验证
        if (!loginForm.name || !loginForm.password) {
            ElMessage.error('姓名和密码不能为空');
            return;
        }
        // 构造正确的登录参数（注意后端实体类属性名称）
        const loginData = {
            name: loginForm.name,  // 后端使用name字段接收手机号
            pwd: loginForm.password  // 后端使用pwd字段接收密码
        };
        console.log('登录参数:', loginData);
        const { data } = await axios.post('/api/rider/login', loginData);
        console.log('登录响应:', data);
        if (data) {
            // 登录成功，检查是否有token和骑手ID
            const token = data.token || '';
            const riderId = data.rider?.id || '';  // 从rider对象中获取id
            console.log('获取到的token:', token);
            console.log('获取到的骑手ID:', riderId);
            // 保存token和骑手ID到本地存储
            if (loginForm.rememberMe) {
                localStorage.setItem('riderToken', token);
                localStorage.setItem('riderId', riderId);
            } else {
                sessionStorage.setItem('riderToken', token);
                sessionStorage.setItem('riderId', riderId);
            }
            ElMessage.success('登录成功');
            // 延迟一小段时间确保token被正确存储
            setTimeout(() => {
                router.push('/rider/profile');
            }, 1000);
        } else {
            ElMessage.error('登录失败，用户名或密码错误');
        }
    } catch (error) {
        console.error('登录请求失败:', error);
        // 区分不同类型的错误
        if (error.response) {
            // 服务器返回了错误状态码
            console.error('服务器错误状态码:', error.response.status);
            console.error('服务器错误响应:', error.response.data);
            ElMessage.error(`登录失败: ${error.response.data?.message || '服务器内部错误'}`);
        } else if (error.request) {
            // 请求已发送但未收到响应
            ElMessage.error('网络错误，请检查网络连接');
        } else {
            // 设置请求时发生错误
            ElMessage.error('请求错误，请稍后重试');
        }
    }
};

const goToRegister = () => {
    // 添加跳转提示
    ElMessage.info('正在跳转至注册页面...');
    router.push('/rider/register');
};
</script>

<style scoped>
.login-form {
    max-width: 400px;
    margin: 100px auto;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
h2 {
    text-align: center;
    margin-bottom: 20px;
}
.el-form-item {
    margin-bottom: 20px;
}
</style>